<template>
  <div>
    <div
      class="assessment-container"
    >
      <div class="search-container">
        <div class="search-container-left" style="display: flex;
    align-items: center;">
          <div class="search-container-item">
            <span>学期：</span>
            <el-select
              v-model="xq"
              style="width: 85px"
              size="mini"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in xqList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>

          <div class="search-container-item">
            <span>课程负责单位：</span>
            <el-popover
              trigger="click"
              placement="bottom"
              v-model="showUnitTree"
              style="cursor: pointer"
              width="120"
              clearable
            >
              <div style="max-height: 260px; overflow-y: auto">
                <el-tree
                  size="mini"
                  default-expand-all
                  node-key="id"
                  :data="bxList"
                  :expand-on-click-node="false"
                  :props="props"
                  @node-click="toShowUnitInfo"
                >
                </el-tree>
              </div>
              <el-input
                size="mini"
                slot="reference"
                v-model="kcfzdw"
                class="selectTree"
                clearable
                style="width: 120px"
                suffix-icon="el-icon-arrow-down"
              >
              <!-- :readonly="true" -->
              </el-input>
            </el-popover>

            <!-- <el-select v-model="kcfzdw" style="width: 85px" size="mini" placeholder="请选择">
            <el-option v-for="item in kcfzdwList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select> -->
          </div>

          <div class="search-container-item">
            <span>级次：</span>
            <el-select
              v-model="jc"
              style="width: 85px"
              size="mini"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in jcList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>

          <div class="search-container-item">
            <span>培养层次：</span>
            <el-select
              v-model="pycc"
              style="width: 85px"
              size="mini"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in pyccList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>

          <div class="search-container-item">
          <span class="demonstration" style="float: left; margin-top: 3px;">专业班次：</span>
          <div class="zybc-select" @click="changeAddValue()" style="float: left;">
            <span>{{majorName}}</span>
          </div>
        </div>

        <!--<div-->
        <!--class="search-container-item"-->
        <!--v-for="(select, index) in selectList"-->
        <!--:key="index"-->
        <!--&gt;-->
        <!--<div v-if="select.type === 'select'" class="box">-->
        <!--<span v-show="select.name">{{ select.name }}</span>-->

        <!--<el-select-->
        <!--v-model="select.val"-->
        <!--style="width: 90px"-->
        <!--size="mini"-->
        <!--placeholder="请选择"-->
        <!--&gt;-->
        <!--<el-option-->
        <!--v-for="item in select.valList"-->
        <!--:key="item.id"-->
        <!--:label="item.name"-->
        <!--:value="item.id"-->
        <!--&gt;-->
        <!--</el-option>-->
        <!--</el-select>-->
        <!--</div>-->
        <!--<div class="box" v-if="select.type === 'data'">-->
        <!--<span class="demonstration" v-show="select.name">{{-->
        <!--select.name-->
        <!--}}</span>-->
        <!--<el-date-picker-->
        <!--v-model="select.val"-->
        <!--type="date"-->
        <!--placeholder="选择日期"-->
        <!--prefix-icon="aaa"-->
        <!--&gt;-->
        <!--</el-date-picker>-->
        <!--</div>-->
        <!--<div v-if="select.type === 'MultiSelect'" class="box"></div>-->
        <!--<div v-if="select.type === 'btn'" class="box">-->
        <!--<span class="demonstration" v-show="select.name">{{-->
        <!--select.name-->
        <!--}}</span>-->
        <!--<el-input-->
        <!--style="width: 100px;"-->
        <!--v-model="select.val"-->
        <!--placeholder="请输入内容"-->
        <!--&gt;</el-input>-->
        <!--</div>-->
        <!--<div v-if="select.type === 'btn_query'" class="box">-->
        <!--<span class="demonstration" v-show="select.name">{{-->
        <!--select.name-->
        <!--}}</span>-->
        <!--<div class="copy-input" @click="changeAddValue()" style="width:135px"><span v-if="selectZybcList.length > 0" style="font-size: 14px;margin-left: 15px;">{{selectZybcList[0].className}}</span></div>-->
        <!--</div>-->

        <!--</div>-->
        <div class="search-button" style="margin-left: 20px" @click="queryInfo">
          <img src="../../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
        <div class="search-button" style="margin-left: 20px" @click="resetAll">
          <img src="../../../../assets/assessment/icon-search.png" alt="" />
          <span>重置</span>
        </div>
      </div>
    </div>
  </div>

  <div class="assessment-container">
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
        style="height: calc(100vh - 320px); overflow-y: auto"
      >
        <el-table-column prop="fzdw" label="系" align="center" :formatter="getXiName">
        </el-table-column>
        <el-table-column prop="jys" label="教研室" align="center" :formatter="getJysName">
        </el-table-column>
        <el-table-column prop="kcbh" label="课程编号" align="center">
        </el-table-column>
        <el-table-column prop="kcmc" label="课程名称" align="center">
        </el-table-column>
        <el-table-column prop="jc" label="授课教员" align="center">
          <template slot-scope="scoped">
            <span v-for="item in scoped.row['jxbList']">{{item.teachTask}},</span>
          </template>
        </el-table-column>
        <el-table-column prop="nj" label="年级" align="center">
        </el-table-column>
        <el-table-column prop="pycc" label="培养层次" align="center">
        </el-table-column>
        <el-table-column prop="xs" label="总学时" align="center">
        </el-table-column>
        <el-table-column prop="jxbList" label="教学班" align="center">
          <template slot-scope="scoped">
            <span v-for="item in scoped.row['jxbList']">{{item.name}},</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="wrapper-container">
    <div class="bottom-block" style="display: block;margin-left:10px">
      <div class="text">当前共找到{{ total }}条记录,当前显示{{ startPage }}-{{ endPage }}条</div>
    </div>
    <div class="pagination-block">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
  </div>

  <el-dialog
    title="选择专业班次"
    :visible.sync="showAddMessageDialog"
    width="1300px"
    class="xzzybc"
  >
    <div>
      <el-row>
        <el-col :span="4">
          <el-tree
            default-expand-all
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            style="color: #004ca7; margin: 20px 40px;background: #f0f2f5;font-weight: bold;"
          ></el-tree>
        </el-col>
        <el-col :span="20" class="border-left">
          <div class="assessment-container" style="width: 100%;padding: 20px;">
            <div class="table-container" style="width: 100%;">
              <el-table
                :data="majorTableData"
                border
                class="table-data"
                row-class-name="row-class"
                cell-class-name="cell-class"
                header-row-class-name="header-row-class"
                header-cell-class-name="header-cell-class"
                style="height: 385px; overflow-y: auto"
                @selection-change="handleSelectionChange"
              >
                <el-table-column align="center" type="selection" width="80">
                </el-table-column>
                <el-table-column
                  prop="className"
                  label="专业班次"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="alias"
                  label="别名"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="studentTeam"
                  label="学员队"
                  width="130"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="specialtyName"
                  label="专业"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="year" label="年级" align="center">
                </el-table-column>
                <el-table-column
                  prop="campus"
                  label="所在校区"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="ratedNumber" label="额定人数" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="wrapper-container" style="width: calc(100% - 40px);">
            <div class="bottom-block" style="display: block">
              <div class="text">当前共找到{{ total1 }}条记录,当前显示{{ startPage1 }}-{{ endPage1 }}条</div>
            </div>
            <div class="pagination-block">
              <el-pagination
                prev-text="上一页"
                next-text="下一页"
                :page-size="pageSize1"
                layout="prev, pager, next, jumper"
                :total="total1"
                @current-change="handleDialogCurrentChange"
                :current-page="currentPage1"
              >
              </el-pagination>
            </div>
          </div>
          <div class="btn-caozuo">
            <el-button type="warning" @click="submitChangeClassState" size="mini" >确定</el-button>
            <el-button type="danger" @click="cancelChangeClassState" size="mini" >取消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

  </el-dialog>
  </div>


</template>

<script>
  import {jxrw_query_teaching_list, queryCommonJysDept, queryCommonPyccId, queryCommonNj, queryCommonXueqi, jxrw_query_teaching_list2, bpksj_query_specialty, jxbgl_data_update,queryDefaultXueQi} from "@/api/trainingManagement/place.js";
  import ButtonItem from "@/components/ButtonItem.vue";

  export default {
    components: {
      ButtonItem,
    },
    data() {
      return {
        props: {
          children: "children",
          label: "name",
        },
        total1: 0, //总条数
        pageSize1: 50, //条数
        startPage1: 0, //开始条数
        endPage1: 0, //结束条数
        currentPage1: 1, //当前页数
        majorTableData: [], //专业表格
        xq: '',
        xqList: [],
        showUnitTree: false,
        bxList: [], //部系列表
        kcfzdw: "",
        xiId: '',
        jc: "",
        jcList: [],
        pycc: "",
        pyccList: [],
        // 校区列表
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
        selectRow: {}, //选中行信息
        selectTreeRow: {}, //树节点选中行信息
        selectZybcList: [], //选中专业班次数据列表
        showAddMessageDialog:false, //专业班次弹窗

        total: 0, //总条数
        pageSize: 50, //条数
        startPage: 0, //开始条数
        endPage: 0, //结束条数
        currentPage: 1, //当前页数
        tableData: [],
        zybcList: [], // 专业班次列表
        major: '',
        majorName: "",  // 专业班次名称
      };
    },
    created() {},
    mounted() {
      this.queryCommonPycc();
      this.queryCommonNj();
      this.queryCommonXueqi();
      this.getDefaultXueQi();
      this.queryCommonDept();
      // this.queryInfo();
    },
    methods: {
      getXiName(row, col){
        if(row.fzdw && row.fzdw != ''){
          return row.fzdw.substr(0,row.fzdw.indexOf('['))
        }else{
          return "";
        }
      },
      getJysName(row, col){
        if(row.fzdw && row.fzdw != ''){
          let temp = row.fzdw.substr(row.fzdw.indexOf('[') + 1)
          return temp.substr(0,temp.indexOf(']'))
        }else{
          return "";
        }
      },
      async getDefaultXueQi(){
        queryDefaultXueQi().then(res=>{
          if(res.data.code == 200){
            this.xq = res.data.data;
          }
        }).then(()=>{
          this.queryInfo()
        })
      },
      // 获取部门
      async queryCommonDept() {
        const res = await queryCommonJysDept();
        if (res.data.code == 200) {
          this.bxList = res.data.data;
        }
      },
      handleNodeClick(val) {
        this.selectTreeRow = val;
        this.queryZybcList();
      },
      toShowUnitInfo(data) {
        this.kcfzdw = data.name;
        this.xiId = data.id;
        this.showUnitTree = false;
      },
      handleSelectionChange(val) {
        this.selectZybcList = val;
      },
      // 查询专业班次数据列表
      async queryZybcList() {
        var trainingLevel = this.selectTreeRow.id || '';
        var year = "";
        var yearSpecialtyId = "";
        var current = this.currentPage1;
        var size = this.pageSize1;
        const res = await bpksj_query_specialty(trainingLevel, year, yearSpecialtyId, current, size);
        if (res.data.code == 200) {
          this.majorTableData = res.data.data.records;
          this.total1 = res.data.data.total;
          var length = this.majorTableData.length;
          this.calculatePage1(
            this.pageSize1,
            res.data.data.current, length);
        }
      },
      // 计算开始和结束条数
      calculatePage1(pageSize, current, length) {
        if (current == 1) {
          if (length != 0) {
            this.startPage1 = 1;
            this.endPage1 = length;
          }
        } else {
          this.startPage1 = pageSize * (current - 1) + 1;
          this.endPage1 = parseInt(this.startPage1)  + parseInt(length) - 1;
        }
      },
      handleDialogCurrentChange() {
        this.currentPage1 = val;
        this.queryZybcList();
      },
      changeAddValue() {
        this.showAddMessageDialog = true;
        this.selectTreeRow.id = ''
        this.queryCommonPycc();
      },
      cancelChangeClassState() {
        this.selectZybcList = [];
        this.showAddMessageDialog = false;
      },
      // async submitChangeClassState() {
      //   if (this.selectZybcList.length > 0) {
      //     if (this.selectZybcList.length != 1) {
      //       this.$message.warning("最多只能选择一条专业班次数据!")
      //       return;
      //     }
      //     var zybc = []
      //     this.selectZybcList.forEach(item => {
      //       zybc.push({id: item.id})
      //     })
      //     this.zybcList = zybc;
      //     this.showAddMessageDialog = false;
      //   } else {
      //     this.$message.warning("请选择一条专业班次数据!")
      //     return;
      //   }
      //
      // },
      // 选中专业班次
      async submitChangeClassState() {
        if (this.selectZybcList.length > 0) {
          if (this.selectZybcList.length > 1) {
            this.$message.warning("最多选择一条专业班次数据!");
            return;
          } else {
            this.major = this.selectZybcList[0].id;
            this.majorName = this.selectZybcList[0].className;
            this.showAddMessageDialog = false;
          }
        } else {
          this.$message.warning("请选择一条专业班次!");
          return;
        }
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.queryInfo();
      },
      // 获取年级列表
      async queryCommonNj() {
        const res = await queryCommonNj('');
        if (res.data.code == 200) {
          this.jcList = res.data.data;
          // this.selectList[2].val = this.selectList[2].valList[0].id;
        }
      },
      // 获取学期列表
      async queryCommonXueqi() {
        const res = await queryCommonXueqi();
        if (res.data.code == 200) {
          this.xqList = res.data.data;
          // this.selectList[0].val = this.selectList[0].valList[0].id;
        }
      },
      async queryCommonPycc() {
        const res = await queryCommonPyccId();
        if (res.data.code == 200) {
          this.pyccList = res.data.data;
          this.data = res.data.data;
          // this.selectTreeRow = this.data[0];
          this.queryZybcList();
        }
      },
      // 信息查询
      async queryInfo() {
        // if (this.zybcList.length == 0) {
        //   this.$message.warning("请先选择专业班次!");
        //   return
        // }
        var data = {
          "xueqi": this.xq,
          "fzdw": this.xiId,
          "nj": this.jc,
          "pycc": this.pycc,
          "zybc":this.major
          // "zybcList": this.major
        }
        const res = await jxrw_query_teaching_list2(data);
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          var length = this.tableData.length;
          this.calculatePage(
            this.pageSize,
            res.data.data.current, length);
        }

        // var term = this.selectList[0].val;
        // var xb = this.selectList[1].val;
        // var NJ = this.selectList[2].val;
        // var eduLevel = this.selectList[3].val;
        // var specialtyClassId = this.selectList[4].val;
        // const res = await jxrw_query_teaching_list(term, xb, NJ, eduLevel, specialtyClassId);
        //   if (res.data.code == 200) {
        //     this.tableData = res.data.data.records;
        //   }
      },
      resetAll(){
        this.xq = '';
        this.kcfzdw = '';
        this.jc = '';
        this.pycc = '';
        this.majorName = ''
      },
      // 计算开始和结束条数
      calculatePage(pageSize, current, length) {
        if (current == 1) {
          if (length != 0) {
            this.startPage = 1;
            this.endPage = length;
          }
        } else {
          this.startPage = pageSize * (current - 1) + 1;
          this.endPage = parseInt(this.startPage)  + parseInt(length) - 1;
        }
      },
    },

    computed(){

    }
  };
</script>
<style lang="less" scoped>
  .assessment-container {
    .el-dialog__body {
      height: 251px;
    }
    .el-dialog__footer {
      padding: 10px 20px 45px;
    }
    .el-checkbox__inner:hover {
      border-color: #004ca7;
    }
    .el-checkbox__inner {
      border: 1px solid #004ca7;
      border-radius: 0;
      height: 18px;
      width: 18px;
    }
    .el-checkbox__inner::after {
      height: 10px;
      left: 6px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #004ca7;
      border-color: #004ca7;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #004ca7;
    }
    .el-checkbox.is-bordered.is-checked {
      border-color: #004ca7;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #004ca7;
    }
  }
</style>
<style lang="less" scoped>
  @import "../../../../styles/text.less";
  .assessment-container .table-container {
    // overflow: scroll;
  }
  .assessment-container .table-container .table-header {
    width: 1935px;
  }
  .assessment-container .table-container .table-body {
    width: 1935px;
  }
  /deep/ .szjky .el-dialog__body {
    height: 432px;
  }
  .pagination-block {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
<style lang="less" scoped>
  @import "../../../../styles/supervision.less";

  @import "../../../../styles/text.less";
  // 表格底部样式
  @import "../../../../styles/delayedExam.less";
  .pagination-block {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .wrapper-container {
    width: 1711px;
    margin: 0 auto;
  }

  /deep/ .table-container {
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 76px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 86px;
    }

    .wrapper-button {
      display: flex;
      flex-direction: column;
      align-items: center;

      > div {
        margin-bottom: 8px;
      }
    }
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      /*border-radius: 9px;*/
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }

  .wrapper-container .search-container .search-container-left {
    width: 100%;
    flex-wrap: wrap;
    .search-container-item {
      width: 12%;
      margin-right: 0px;
      .box {
        > span {
          text-align: left;
        }
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 20px;
        align-items: center;
      }
    }
  }

  /deep/.el-date-editor.el-input {
    width: 110px;
  }
  /deep/ .el-input--medium {
    width: 110px;
    .el-input__inner {
      height: 28px;
      width: 110px;
      padding: 0px 18px;
    }
  }
  /deep/ .el-table thead {
    color: #004ca7 !important;
  }

  .btn {
    margin-top: 271px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 271px;
    .submit {
      width: 84px;
      height: 27px;
      line-height: 8px;
    }
  }
  .bottom-block {
    // display: flex;
    flex-direction: row;
    justify-content: space-between !important;
    .export-button {
      width: 127px;
      height: 27px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      > img {
        width: 17px;
        height: 17px;
      }
      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
    }
    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }

  .search-button {
    width: 77px;
    height: 28px;
    line-height: 28px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }
    > img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }

  .mar-lef-2 {
    margin-left: 20px;
  }
  .undeLine {
    text-decoration: underline;
    cursor: pointer;
  }

  .assessment-container {
    width: calc(100% - 20px);
    .table-container {
      width: 100%;
    }
  }

  .zybc-select {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 230px;
    height: 28px;
    border: 1px solid;
    border-radius: 5px;
    cursor: pointer;
    padding-left: 10px;
    font-size: 14px;
    padding-top: 3px;
  }

  .xzzybc {
    /deep/ .el-dialog {
      height: 720px;
    }
  }

  .btn-caozuo {
    // display: flex;
    // align-items: center;
    // justify-content: space-around;
    text-align: center;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 25px;
  }
</style>
